<template>
  <div>
    <!--    <el-button type="primary" @click="delrouterall()">click</el-button>-->


    <div style="margin: 10px 0">
      <router-link :to="'/cyjk/yjqx?jh=' + jh" style="color: #20a0ff">
        <el-button type="primary" @click="">历史曲线</el-button>
      </router-link>

<!--      <el-button type="primary" @click="">历史曲线</el-button>-->
      <div style="float: left; margin-bottom: 10px; font-size: 14px">
        单位<el-cascader
            style="margin-left: 10px; margin-right: 20px; width: 255px; "
            placeholder="请选择单位"
            ref="dwref"
            v-model="dwpath"
            @change="dwchange"
            :options="dwoptions"
            :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id', emitPath: true }"
            clearable>
        </el-cascader>
        井号
        <el-select v-model="jh" filterable placeholder="请输入井号" style="margin-right: 20px">
          <el-option
              v-for="item in jhs"
              :key="item"
              :label="item"
              :value="item">
          </el-option>
        </el-select>
        <el-date-picker
            v-model="datearr"
            type="datetimerange"
            value-format = "yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
        </el-date-picker>

        <el-button style="margin-left: 20px;margin-right: 10px" type="primary" @click="search">搜索</el-button>
      </div>
    </div>
    <el-table ref="table" @selection-change="handleSelectionChange" :data="tableData"
              style="margin: 10px; width: 1600px" border stripe>
      <el-table-column type="index" label="序号" width="60">
      </el-table-column>
      <el-table-column sortable prop="jh" label="井号" width="120">
      </el-table-column>
      <el-table-column prop="ip" label="IP" width="180" v-if="false">
      </el-table-column>
      <el-table-column sortable prop="dwObj.dwname" label="单位" width="150">
      </el-table-column>
      <el-table-column sortable prop="gxObj.name" label="干线" width="150">
      </el-table-column>
      <el-table-column sortable prop="cjsj" label="采集时间" width="180">
      </el-table-column>
      <el-table-column sortable prop="jkHy" label="回压" width="100">
      </el-table-column>
      <el-table-column sortable prop="jkTy" label="套压" width="100">
      </el-table-column>
      <el-table-column sortable prop="jkWd" label="温度" width="100">
      </el-table-column>
      <el-table-column sortable prop="hsl" label="含水" width="100">
      </el-table-column>
      <el-table-column sortable prop="jygYw" label="加药罐液位" width="120">
      </el-table-column>
    </el-table>


    <div class="block" style="padding: 5px">
      <el-pagination

          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,500,1000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>

</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";
import {formatDateTime} from "@/utils/formatDateTime";


export default {
  created() {
    this.queryjh = this.$route.query.jh
    // this.querydwid = this.$route.query.dwid
    // service.get('/dw/getAll', {}).then(
    //     response => {
    //       if (response.data.code == 20000) {
    //         this.dwoptions = response.data.data
    //         return service.get('/yjxx/getDwByJh', {params: {jh: this.queryjh}})
    //       }
    //     }
    // ).then(
    //     response => {
    //       if(response.data.code == 20000){
    //         let dwid = response.data.data
    //         service.get('/dw/getPathByid', {params: {id: dwid}}).then(
    //             response => {
    //               if (response.data.code == 20000) {
    //                 this.dwpath = response.data.data
    //               }
    //             }
    //         )
    //         return service.get('/yjxx/getjhsBydw', {params: {dwid}})
    //       }
    //     }
    // ).then(
    //     response => {
    //       if (response.data.code == 20000) {
    //         this.jhs = response.data.data
    //         this.jh = this.queryjh
    //         const end = new Date();
    //         const start = new Date();
    //         start.setTime(start.getTime() - 3600 * 1000 * 24 );
    //         let starttime = formatDateTime(start, "yyyy-MM-dd HH:mm:ss")
    //         let endtime = formatDateTime(end, "yyyy-MM-dd HH:mm:ss")
    //
    //         this.datearr=[starttime,endtime]
    //         this.load();
    //       }
    //     }
    // )
  },
  activated() {
    this.queryjh = this.$route.query.jh
    // this.querydwid = this.$route.query.dwid
    service.get('/dw/getAll', {}).then(
        response => {
          if (response.data.code == 20000) {
            this.dwoptions = response.data.data
            return service.get('/yjxx/getDwByJh', {params: {jh: this.queryjh}})
          }
        }
    ).then(
        response => {
          if(response.data.code == 20000){
            let dwid = response.data.data
            service.get('/dw/getPathByid', {params: {id: dwid}}).then(
                response => {
                  if (response.data.code == 20000) {
                    this.dwpath = response.data.data
                  }
                }
            )
            return service.get('/yjxx/getjhsBydw', {params: {dwid}})
          }
        }
    ).then(
        response => {
          if (response.data.code == 20000) {
            this.jhs = response.data.data
            this.jh = this.queryjh
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            let starttime = formatDateTime(start, "yyyy-MM-dd HH:mm:ss")
            let endtime = formatDateTime(end, "yyyy-MM-dd HH:mm:ss")
            // console.log
            this.datearr=[starttime,endtime]
            this.load();
          }
        }
    )
  },
  data() {
    return {
      queryjh: null,
      querydwid: null,
      jh: null,
      jhs: [],
      startdate: null,
      endate: null,
      dwoptions: [],
      dwpath: [],
      // dwval: [],
      devname: null,
      // dwid: null,
      // devtype: null,
      // devtypeArr: [],
      tableData: [],
      // selectedRows: [], // 用来存储选中行的数据
      pageSize: 10,
      total: 100,
      currentPage: 1,
      pickerOptions: {
        shortcuts: [ {
          text: '最近一天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 );
            picker.$emit('pick', [start, end]);
          }
        },{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      datearr: [],

    }
  },
  methods: {
    test() {
      console.log(this.$router)
    },
    load() {
      if(this.jh == null || this.jh == '' || this.datearr == null || this.datearr.length == 0)
        return
      service.get('/yjss/gethistorypageByjh', {
        params: {
          pagesize: this.pageSize,
          pagenum: this.currentPage,
          jh: this.jh,
          startdate: this.datearr[0],
          enddate: this.datearr[1],
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
              this.currentPage = response.data.data.current;
              this.pageSize = response.data.data.size;
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
    },
    //根据单位级联查询该单位下的井号，显示在下拉框
    dwchange(dw) {
      console.log(dw)
      service.get('/yjxx/getjhsBydw', {
        params: {
          dwid: dw[dw.length - 1]
        }
      }).then(
          response => {
            if (response.data.code == 20000) {
              this.jhs = response.data.data;
              this.jh = ''
            }
          }
      )
    },

    handleSelectionChange(selection) {
      // console.log(selection)
      // this.selectedRows = selection.map(row => row._row);
      this.selectedRows = selection
      // console.log(this.selectedRows)
    },


    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },

    // handleNewSelChange(val) {
    //   console.log(this.form.datatypes)
    //   if (val == 0 || val == 1) {//线圈 离散输入
    //     this.form.datatypes = [{id: 1, name: '布尔'}]
    //
    //   } else if (val == 3 || val == 4) {//保持寄存器  输入寄存器
    //     this.form.datatypes = [
    //       {id: 2, name: '16位无符号整数'},
    //       {id: 3, name: '16位整数'},
    //       {id: 4, name: '32位无符号整数'},
    //       {id: 5, name: '32位整数'},
    //       {id: 8, name: '32位float'}]
    //
    //   }
    //   this.form.regdatatp = null
    // },

    search() {
      this.currentPage = 1
      this.load()
    },


  }
}
</script>

<style scoped>

</style>
